<template>
  <el-card>
    <el-table
      :data="skuLit"
      stripe
      :loading="isloading"
      border
      row-style="height:104px"
    >
      <el-table-column
        label="序号"
        type="index"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片" width="150" align="center">
        <template v-slot="{ row }">
          <el-image :src="row.skuDefaultImg" style="width: 75px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template v-slot="{ row }">
          <el-button
            size="small"
            v-if="row.isSale == '1'"
            type="success"
            :icon="Bottom"
            @click="bottomSale(row.id)"
          ></el-button>
          <el-button
            size="small"
            v-else
            type="info"
            :icon="Top"
            @click="topSale(row.id)"
          ></el-button>
          <el-button size="small" type="primary" :icon="Edit"></el-button>
          <el-button
            size="small"
            type="info"
            :icon="InfoFilled"
            @click="skuDetail(row.id)"
          ></el-button>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            :title="`确定要删除${row.skuName}吗?`"
            @confirm="confirmEvent(row.id)"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button size="small" type="danger" :icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :page-sizes="[10, 20, 30]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getList"
      @size-change="getList"
    />
  </el-card>

  <el-drawer v-model="isDrawer" size="50%" :with-header="false">
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>名称</span></el-col>
      <el-col :span="14" class="col_right"
        ><span>{{ skuInfo.skuName }}</span></el-col
      >
      <!-- <el-col :span="7"><span></span></el-col> -->
    </el-row>
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>描述</span></el-col>
      <el-col :span="14" class="col_right"
        ><span>{{ skuInfo.skuDesc }}</span></el-col
      >
    </el-row>
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>价格</span></el-col>
      <el-col :span="14" class="col_right"
        ><span>{{ skuInfo.price }}</span></el-col
      >
    </el-row>
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>平台属性</span></el-col>
      <el-col :span="14" class="col_right"
        ><el-tag
          style="margin-left: 10px"
          v-for="attrValue in skuInfo.skuAttrValueList"
          :key="attrValue.id"
          >{{ attrValue.valueName }}</el-tag
        ></el-col
      >
    </el-row>
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>销售属性</span></el-col>
      <el-col :span="14" class="col_right"
        ><el-tag
          style="margin-left: 10px"
          v-for="saleAttrValue in skuInfo.skuSaleAttrValueList"
          :key="saleAttrValue.id"
          >{{ saleAttrValue.saleAttrValueName }}</el-tag
        ></el-col
      >
    </el-row>
    <el-row :gutter="21" class="row_height">
      <el-col :span="7" class="col_left"><span>商品图片</span></el-col>
      <el-col
        :span="14"
        class="col_right"
        style="background: #ccc; margin-top: 20px; padding-top: 10px"
      >
        <el-carousel height="560px">
          <el-carousel-item
            v-for="skuinfoimg in skuInfo.skuImageList"
            :key="skuinfoimg.id"
          >
            <el-image :src="skuinfoimg.imgUrl" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script lang="ts">
export default {
  name: 'Sku',
};
</script>

<script lang="ts" setup>
import { Delete, InfoFilled, Edit, Top, Bottom } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import type { SkuListModel, SkuModel } from '@/api/product/model/skuModel';
import {
  cancelSaleApi,
  deleteSkuApi,
  getSkuInfoApi,
  getSkuListApi,
  onSaleApi,
} from '@/api/product/sku';
import { ElMessage } from 'element-plus';

/* 查看SKU详情 */
// 定义显示Drawer的标识
const isDrawer = ref(false);
// 定义用来存储SKU详情的信息的数据
const skuInfo = ref<SkuModel>({});

// 点击查看SKU详情的函数
const skuDetail = async (id: number) => {
  // 显示Drawer
  isDrawer.value = true;
  // 发送sku详情列表的请求
  const result = await getSkuInfoApi(id);
  skuInfo.value = result;
  console.log(skuInfo.value);
};

/* 删除Sku */
// 确认删除和取消删除的回调函数
const confirmEvent = async (id: number) => {
  await deleteSkuApi(id);
  ElMessage.success('删除成功!');
  getList();
};
const cancelEvent = () => {
  ElMessage.info('取消删除!');
  getList();
};

/* 上架和下架SKU */

// 发送上架请求
const topSale = async (id: number) => {
  await onSaleApi(id);
  ElMessage.success('上架成功!');
  getList();
};

// 发送下架请求
const bottomSale = async (id: number) => {
  ElMessage.info('下架成功!');
  await cancelSaleApi(id);
  getList();
};

/* 获取Sku分页列表数据 */
// 定义数据
const page = ref(1);
const limit = ref(10);
const total = ref(0);
// 定义用于存储Sku列表的数据
const skuLit = ref<SkuListModel>([]);
// 定义显示表格loading的标识
const isloading = ref(false);

// 获取Sku数据的函数
const getList = async () => {
  // 显示loading
  isloading.value = true;
  // 发起请求
  const result = await getSkuListApi(page.value, limit.value);
  // 重新赋值
  skuLit.value = result.records;
  total.value = result.total;
  // 关闭loading
  isloading.value = false;
  console.log(skuLit.value);
};

// 初始化请求数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.col_left {
  font-size: 20px;
  text-align: right;
}
.col_right {
  font-size: 20px;
  text-align: left;
}
.row_height {
  line-height: 40px;
}
.el-image {
  background-color: red;
}
</style>
